﻿<Page
    x:Name="pageRoot"
    x:Class="Animation.ShowcasePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Animation"
    xmlns:common="using:Animation.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:bam="using:Brain.Animate"
    mc:Ignorable="d">

    <Grid x:Name="rootGrid">

        <bam:AnimationTrigger.Open>
            <bam:FadeInDownAnimation/>
        </bam:AnimationTrigger.Open>
        
        <bam:AnimationTrigger.Close>
            <bam:BounceOutAnimation Duration="1.5"/>
        </bam:AnimationTrigger.Close>

        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.55,0">
                <GradientStop Color="#FF5FF8FF" Offset="0"/>
                <GradientStop Color="#FF12D7FF" Offset="0.322"/>
                <GradientStop Color="{StaticResource YellowColor}" Offset="0.425"/>
                <GradientStop Color="{StaticResource LightGreyColor}" Offset="1"/>
                <GradientStop Color="{StaticResource YellowColor}" Offset="0.642"/>
            </LinearGradientBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <Grid RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" VerticalAlignment="Top">
            <Grid.RenderTransform>
                <CompositeTransform SkewY="5"/>
            </Grid.RenderTransform>
            <bam:PanControl x:Name="panControl" AutoPanRate="200" Opacity="0.8" VerticalAlignment="Top" >
                <bam:PanControl.OtherContent>
                    <Image Source="/Images/Clouds.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="400" Stretch="Fill" VerticalAlignment="Top" CacheMode="BitmapCache" />
                </bam:PanControl.OtherContent>
                <bam:PanControl.Content>
                    <Image Source="/Images/Clouds.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="400" Stretch="Fill" VerticalAlignment="Top" CacheMode="BitmapCache" />
                </bam:PanControl.Content>
            </bam:PanControl>

            <bam:PanControl 
                AutoPanRate="120" Opacity="0.8" Margin="0,50,0,0" Offset="300" VerticalAlignment="Top">
                <bam:AnimationTrigger.Open>
                    <bam:BounceInAnimation Delay="0.3"/>
                </bam:AnimationTrigger.Open>
                
                <bam:PanControl.OtherContent>
                    <Image Source="/Images/Clouds.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="600" Stretch="Fill" VerticalAlignment="Top" CacheMode="BitmapCache" />
                </bam:PanControl.OtherContent>
                <bam:PanControl.Content>
                    <Image Source="/Images/Clouds.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="400" Stretch="Fill" VerticalAlignment="Top" CacheMode="BitmapCache" />
                </bam:PanControl.Content>
            </bam:PanControl>

            <bam:PanControl 
                AutoPanRate="60" VerticalAlignment="Top" Margin="0,-55,0,0">
                <bam:AnimationTrigger.Open>
                    <bam:BounceInAnimation Delay="0.6"/>
                </bam:AnimationTrigger.Open>
                <bam:PanControl.OtherContent>
                    <Image Source="/Images/Bushes.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="400" Stretch="Fill" CacheMode="BitmapCache" />
                </bam:PanControl.OtherContent>
                <bam:PanControl.Content>
                    <Image Source="/Images/Bushes.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="400" Stretch="Fill" CacheMode="BitmapCache" />
                </bam:PanControl.Content>
            </bam:PanControl>

        </Grid>

        <Grid Margin="0,250,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Tapped="Person_Tapped" Grid.RowSpan="2" >
            <bam:DropShaddow 
                    x:Name="PersonWIthShaddow"
                    Style="{StaticResource CircleDropShaddowStyle}" 
                    Width="100" Height="150" OffsetY="2">

                <bam:AnimationTrigger.Open>
                    <bam:BounceInAnimation Delay="1.2"/>
                </bam:AnimationTrigger.Open>
                <bam:AnimationTrigger.Close>
                    <bam:BounceOutAnimation Duration="1.5"/>
                </bam:AnimationTrigger.Close>

                <bam:AnimatedImage x:Name="Person" 
        			    HorizontalAlignment="Left"
        			    Width="100" Height="150" 
        			    SpriteWidth="100" SpriteHeight="150" 
        			    SpriteSheetSource="/Images/HeadSpriteSheet.png" 
        			    FrameTimeSpan="00:00:00.2" Background="White" RenderTransformOrigin="0.5,0.5" IsAnimating="True"
                        >
                    <bam:AnimatedImage.SpriteCoordinates>
                        <bam:SpriteCoordinate Name="Head1" X="0" Y="0" />
                        <bam:SpriteCoordinate Name="Head2" X="-100" Y="0" />
                        <bam:SpriteCoordinate Name="Head3" X="-200" Y="0" />
                        <bam:SpriteCoordinate Name="Head4" X="0" Y="-150" />
                        <bam:SpriteCoordinate Name="Head5" X="-100" Y="-150" />
                        <bam:SpriteCoordinate Name="Head6" X="-200" Y="-150" />
                        <bam:SpriteCoordinate Name="Head7" X="-300" Y="0" />
                        <bam:SpriteCoordinate Name="Head8" X="-300" Y="-150" />
                    </bam:AnimatedImage.SpriteCoordinates>
                </bam:AnimatedImage>
            </bam:DropShaddow>
        </Grid>
        
        <Grid RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" VerticalAlignment="Top">
            <Grid.RenderTransform>
                <CompositeTransform SkewY="3"/>
            </Grid.RenderTransform>
            
            <bam:PanControl 
                AutoPanRate="50" Offset="300" VerticalAlignment="Top" Margin="0,50,0,0">
                <bam:AnimationTrigger.Open>
                    <bam:BounceInAnimation Delay="0.7"/>
                </bam:AnimationTrigger.Open>
                <bam:PanControl.OtherContent>
                    <Image Source="/Images/Bushes.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="400" Stretch="Fill" CacheMode="BitmapCache" />
                </bam:PanControl.OtherContent>
                <bam:PanControl.Content>
                    <Image Source="/Images/Bushes.png" Width="{Binding ActualWidth, ElementName=rootGrid}" Height="400" Stretch="Fill" CacheMode="BitmapCache" />
                </bam:PanControl.Content>
            </bam:PanControl>

        </Grid>

        <Button x:Name="target" Content="I am a Button"  
                Grid.RowSpan="2"
                VerticalAlignment="Top" HorizontalAlignment="Center" 
                Margin="50" FontSize="36" 
                Background="{StaticResource LightGreyBrush}" 
                Foreground="{StaticResource DarkGreyBrush}">
            <bam:AnimationTrigger.Open>
                <bam:BounceInAnimation Delay="1.9"/>
            </bam:AnimationTrigger.Open>
            <bam:AnimationTrigger.Close>
                <bam:FadeOutAnimation />
            </bam:AnimationTrigger.Close>
        </Button>

        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
        </Grid>
        <Hub VerticalAlignment="Bottom" Grid.Row="1">
            <Hub.HeaderTemplate>
                <DataTemplate>
                    <bam:AnimatingTextBlock Text="Animation Manager" Interval="0.1" Tapped="Header_Tapped" >
                        <bam:AnimatingTextBlock.InAnimation>
                            <bam:BounceInLeftAnimation />
                        </bam:AnimatingTextBlock.InAnimation>
                    </bam:AnimatingTextBlock>
                </DataTemplate>
            </Hub.HeaderTemplate>
        	<HubSection Header="Attention">
        		<DataTemplate>
                    <ItemsControl>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="2" ItemWidth="100"  />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <Button Content="Flash" Click="Button_Click" Tag="Flash" HorizontalAlignment="Stretch" />
                        <Button Content="Bounce" Click="Button2_Click" Tag="Bounce" HorizontalAlignment="Stretch" />
                        <Button Content="Shake" Click="Button_Click" Tag="Shake" HorizontalAlignment="Stretch" />
                        <Button Content="Tada" Click="Button_Click" Tag="Tada" HorizontalAlignment="Stretch" />
                        <Button Content="Swing" Click="Button_Click" Tag="Swing" HorizontalAlignment="Stretch" />
                        <Button Content="Wobble" Click="Button_Click" Tag="Wobble" HorizontalAlignment="Stretch" />
                        <Button Content="Pulse" Click="Button_Click" Tag="Pulse" HorizontalAlignment="Stretch" />
                        <Button Content="Jump" Click="Button2_Click" Tag="Jump" HorizontalAlignment="Stretch" />
                    </ItemsControl>

        		</DataTemplate>
        	</HubSection>


            <HubSection Header="Flippers">
                <DataTemplate>
                    <ItemsControl>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="2" ItemWidth="100"  />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <Button Content="Flip" Click="Button_Click" Tag="Flip" HorizontalAlignment="Stretch"  />
                        <Button Content="Flip Out X" Click="Button_Click" Tag="FlipOutX" HorizontalAlignment="Stretch" />
                        <Button Content="Flip In X" Click="Button_Click" Tag="FlipInX" HorizontalAlignment="Stretch" />
                        <Button Content="Flip Out Y" Click="Button_Click" Tag="FlipOutY" HorizontalAlignment="Stretch" />
                        <Button Content="Flip In Y" Click="Button_Click" Tag="FlipInY" HorizontalAlignment="Stretch" />

                        <Button Content="All" Click="AllFlippers_Click" Foreground="Tomato" HorizontalAlignment="Stretch" />
                    </ItemsControl>

                </DataTemplate>
            </HubSection>

            <HubSection Header="Fading">
                <DataTemplate>
                    <ItemsControl>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="2" ItemWidth="100"  />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <Button Content="In" Click="Button_Click" Tag="FadeIn" HorizontalAlignment="Stretch" />
                        <Button Content="Out" Click="Button_Click" Tag="FadeOut" HorizontalAlignment="Stretch" />
                        <Button Content="Out Up" Click="Button_Click" Tag="FadeOutUp" HorizontalAlignment="Stretch" />
                        <Button Content="Out Down" Click="Button_Click" Tag="FadeOutDown" HorizontalAlignment="Stretch" />
                        <Button Content="Out Left" Click="Button_Click" Tag="FadeOutLeft" HorizontalAlignment="Stretch" />
                        <Button Content="Out Right" Click="Button_Click" Tag="FadeOutRight" HorizontalAlignment="Stretch" />
                        <Button Content="In Up" Click="Button_Click" Tag="FadeInUp" HorizontalAlignment="Stretch" />
                        <Button Content="In Down" Click="Button_Click" Tag="FadeInDown" HorizontalAlignment="Stretch" />
                        <Button Content="In Left" Click="Button_Click" Tag="FadeInLeft" HorizontalAlignment="Stretch" />
                        <Button Content="In Right" Click="Button_Click" Tag="FadeInRight" HorizontalAlignment="Stretch" />

                    </ItemsControl>

                </DataTemplate>
            </HubSection>

            <HubSection Header="Scaling">
                <DataTemplate>
                    <ItemsControl>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="2" ItemWidth="100"  />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <Button Content="In" Click="Button_Click" Tag="ScaleIn" HorizontalAlignment="Stretch" />
                        <Button Content="Out" Click="Button_Click" Tag="ScaleOut" HorizontalAlignment="Stretch" />

                    </ItemsControl>

                </DataTemplate>
            </HubSection>

            <HubSection Header="Bouncing">
                <DataTemplate>
                    <ItemsControl>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="2" ItemWidth="100"  />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <Button Content="In" Click="Button_Click" Tag="BounceIn" HorizontalAlignment="Stretch" />
                        <Button Content="Out" Click="Button_Click" Tag="BounceOut" HorizontalAlignment="Stretch" />
                        <Button Content="Out Up" Click="Button_Click" Tag="BounceOutUp" HorizontalAlignment="Stretch" />
                        <Button Content="Out Down" Click="Button_Click" Tag="BounceOutDown" HorizontalAlignment="Stretch" />
                        <Button Content="Out Left" Click="Button_Click" Tag="BounceOutLeft" HorizontalAlignment="Stretch" />
                        <Button Content="Out Right" Click="Button_Click" Tag="BounceOutRight" HorizontalAlignment="Stretch" />
                        <Button Content="In Up" Click="Button_Click" Tag="BounceInUp" HorizontalAlignment="Stretch" />
                        <Button Content="In Down" Click="Button_Click" Tag="BounceInDown" HorizontalAlignment="Stretch" />
                        <Button Content="In Left" Click="Button_Click" Tag="BounceInLeft" HorizontalAlignment="Stretch" />
                        <Button Content="In Right" Click="Button_Click" Tag="BounceInRight" HorizontalAlignment="Stretch" />

                        <Button Content="All" Click="AllBounce_CLick" Foreground="Tomato" HorizontalAlignment="Stretch" />

                    </ItemsControl>

                </DataTemplate>
            </HubSection>

            <HubSection Header="Special">
                <DataTemplate>
                    <ItemsControl>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="2" ItemWidth="100"  />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <Button Content="Hinge" Click="Button_Click" Tag="Hinge" HorizontalAlignment="Stretch" />
                        <Button Content="In Right" Click="Button_Click" Tag="LightSpeedInRight" HorizontalAlignment="Stretch" />
                        <Button Content="Out Right" Click="Button_Click" Tag="LightSpeedOutRight" HorizontalAlignment="Stretch" />
                        <Button Content="In Left" Click="Button_Click" Tag="LightSpeedInLeft" HorizontalAlignment="Stretch" />
                        <Button Content="Out Left" Click="Button_Click" Tag="LightSpeedOutLeft" HorizontalAlignment="Stretch" />
                        <Button Content="Reset" Click="Button_Click" Tag="Reset" HorizontalAlignment="Stretch" />
                        <Button Content="Walk" Click="WalkButton_Click" HorizontalAlignment="Stretch" />

                    </ItemsControl>

                </DataTemplate>
            </HubSection>

        </Hub>

    </Grid>
</Page>
